<template>
  <div class="layout-padding-auto layout-padding-view">
    <el-form :model="state.queryForm" ref="queryRef" :inline="true">
      <el-form-item :label="$t('bar.printer')" prop="printer">
        <el-select v-model="PrinterName" placeholder="Select" style="width: 160px">
          <el-option :key="ds.id" :label="ds.value" :value="ds.value" v-for="ds in printerOptions"></el-option>
        </el-select>
        <el-button type="info" plain icon="Printer" @click="print">
        <!--{{ $t('bar.print') }}-->
        </el-button>
        <el-button  :disabled="multiple" icon="Delete" type="danger" @click="handleDelete(selectObjs)">
            {{ $t("mesBillsRule.delete") }}
          </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
      style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe  @selection-change="selectionChangHandle"
      :header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column type="index" label="#" width="80" />
      <el-table-column prop="sourceCode" :label="$t('bar.receiptCode')" show-overflow-tooltip width="200"/>
      <el-table-column prop="barcode" :label="$t('bar.barcode')" show-overflow-tooltip width="200"/>
      <el-table-column prop="realBarCodeStatus" :label="$t('bar.barcodeStatus')" show-overflow-tooltip width="120">
						<template #default="scope">
                            <el-tag type="primary" effect="plain" >
                                {{ scope.row.realBarCodeStatus }}
                            </el-tag>
                        </template>
					</el-table-column>
      <el-table-column prop="barcodeTypeName" :label="$t('bar.barcodetypename')" show-overflow-tooltip width="150"/>
      <el-table-column prop="materialCode" :label="$t('bar.materialcode')" show-overflow-tooltip width="120"/>
      <el-table-column prop="materialName" :label="$t('bar.materialname')" show-overflow-tooltip width="200"/>
      <!--<el-table-column prop="pcsQty" :label="$t('bar.pcsqty')" show-overflow-tooltip />-->
      <el-table-column prop="warehouseCode" :label="$t('bar.warehousecode')" show-overflow-tooltip width="150"/>
      <el-table-column prop="warehouseName" :label="$t('bar.warehousename')" show-overflow-tooltip width="150"/>
      <el-table-column prop="unit" :label="$t('bar.unit')" show-overflow-tooltip />
      <el-table-column prop="currentQty" :label="$t('bar.currentqty')" show-overflow-tooltip width="100"/>
      <el-table-column prop="supplierName" :label="$t('bar.suppliername')" show-overflow-tooltip width="200"/>
      <el-table-column :label="$t('mesBillsRule.operation')" width="130">
          <template #default="scope">
            <el-button icon="edit"  type="primary" size="small" v-auth="'digital_mesBillsRule_edit'"
                       @click="formDialogRef.openEditDialog(scope.row)">
            </el-button>
            <el-button icon="delete"  type="danger" size="small" 
                       @click="handleDelete([scope.row.barcode])">
            </el-button>
          </template>
        </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    <editBarcodeForm ref="formDialogRef" @getChildren="oncFun" />
  </div>
</template>
<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {barcodePrint, getPrinter} from '/@/api/platform/wms/sp';
import {reactive, ref} from 'vue';
import {GetReceiptBarcodeList,delReceiptBarcode} from '/@/api/platform/wms/reprintbarcode';
import {ElMessage} from 'element-plus';
import {useI18n} from 'vue-i18n';
import { useMessage, useMessageBox } from "/@/hooks/message";
const editBarcodeForm =  defineAsyncComponent(() => import('./editBarcodeForm.vue'));
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
// 定义变量内容
const formDialogRef = ref()

const { t } = useI18n();

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    SourceCode: ''
  },
  pageList: GetReceiptBarcodeList
})

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)
//打印机列表
const printerOptions = ref();
const tableRef = ref();
const PrinterName = ref('');
// 初始化数据
onMounted(() => {
  getPrinter({ code: "printerSetup", text: "" }).then((res) => {
    printerOptions.value = res.data;
  });
});

const oncFun= (x:any) => {
    getDataList()
}

// 删除操作
const handleDelete = async (barcode: string[]) => {
  try {
    await useMessageBox().confirm(t('mesBillsRule.permanentlyDeleted'));
  } catch {
    return;
  }

  try {
    await delReceiptBarcode(barcode);
    console.log(barcode)
    getDataList();
    useMessage().success(t('mesBillsRule.deleteSuccess'));
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};

// 搜索变量
const queryRef = ref()

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  getDataList()
}

// 通过id进行子表的查询
const query = (row: Object) => {
  // 赋值查询参数
  state.queryForm.SourceCode=row.receiptCode;
  state.queryForm.MaterialCode=row.materialCode;
  // 刷新子表数据
  getDataList()
}
//打印
const print = () => {
	var selectedAry = tableRef.value.getSelectionRows();
	if (!PrinterName.value) {
		ElMessage.error(t('bar.selectPrinter'));
		return;
	}
	if (selectedAry.length == 0) {
		ElMessage.error(t('bar.selectBarcodes'));
		return;
	}
	selectedAry.forEach(element => {
		barcodePrint({ "barcode": element.barcode, "printerName": PrinterName.value, "operatePage": "ReprintBarcode" }).then((res) => {

		});
	});

}

// 多选事件
const selectionChangHandle = (objs: { barcode: string }[]) => {
  selectObjs.value = objs.map(({barcode}) => barcode);
  multiple.value = !objs.length;
};


// 暴露变量
defineExpose({
  resetQuery,
  query
});

</script>